<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    body {
      height: 1200px;
      margin: 0;
    }
    .container {
      width: 300px;
      height: 300px;
      border: 1px solid #000;
      position: relative;
      left: 200px;
      top: 200px;
    }
    .dv {
      width: 100px;
      height: 100px;
      background: red;
      /* position: absolute;
      top: 200px;
      left: 100px; */
    }
    .btn {
      position: fixed;
      bottom: 200px;
    }
  </style>
  <body>
    <div class="container">
      <div class="dv">
        <button class="btn">点击</button>
      </div>
    </div>
  </body>
</html>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  //offset()返回一个对象 里面有left和top的值
  // 值都是数值，不带单位
  $(".dv").offset();
  console.log($(".dv").offset());
  //jquery中 offset可以进行设置
  $(".dv").offset({ top: 100, left: 100 });

  // position 获取当前盒子相对于父盒子的位置
  console.log($(".dv").position());
  //不能设置
  $(".dv").position({ left: 100, top: 100 });

  //   获取页面被卷去的距离
  $(window).scroll(function () {
    console.log($(window).scrollTop());
  });

  //   设置页面顶部的距离
  $(".btn").click(function () {
    $("html").scrollTop(0);
    // $(window).scrollTop(0);
  });
</script>
